<style lang="scss">
// 定义一个名为box的样式，宽度为100%，背景色为#eee，使用flex布局，列数为2，允许换行
.box {
  width: 100%;
  background: #eee;
  display: flex;
  column-count: 2;
  flex-wrap: wrap;
  // 定义一个名为list的样式，宽度为48%，背景色为#fff，左边距为5px，上边距为5px，超出部分隐藏
  .list {
    width: 48%;
    background: #fff;
    margin-left: 5px;
    margin-top: 5px;
    overflow: hidden;
  }
  .info {
    padding: 5px;
  }
}
// 定义一个名为imgs的样式，宽度为150px，高度为180px
.imgs {
  width: 150px;
  height: 180px;
  margin: 0 auto;
}

// 定义一个名为tag的样式，显示为行内块元素，宽度为35px，高度为20px，行高为20px，背景色为#64c996，文字颜色为#fff，字体大小为15px，文字居中
.tag {
  display: inline-block;
  width: 35px;
  height: 20px;
  line-height: 20px;
  background: #64c996;
  color: #fff;
  font-size: 13px;
  text-align: center;
  margin-left: 5px;
  border-radius: 2px;
}
.name {
  font-size: 13px;
  display: inline-block;
  margin-left: 5px;
}
// 定义一个名为price的样式，文字颜色为红色
.price {
  color: red;
}
</style>
<template>
  <!-- 定义一个名为box的div，使用v-for指令遍历list数组，生成多个list元素 -->
  <div class="box">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="list"
      @click="$router.push(`/shopdetail/${item.shop_spu_id}`)"
    >
      <!-- 使用v-bind指令绑定图片的src属性为item.image -->
      <!-- <img v-lazy="item.image" alt="" class="imgs" /> -->
      <div class="info">
        <!-- 使用v-bind指令绑定tag的文本为item.tag -->
        <span class="tag">{{ item.tag }}</span>
        <span>{{ item.name }}</span>
        <img :src="item.image" alt="" class="imgs" />
        <!-- 使用v-bind指令绑定subtitle的文本为item.subtitle -->
        <p>{{ item.subtitle }}</p>
        <!-- 使用v-bind指令绑定price的文本为item.price，并在前面加上￥符号 -->
        <p class="price">￥{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入ref和getlist函数
import { ref } from 'vue'
import { getlist } from '../../api/http'

// 定义一个名为list的ref变量，初始值为空数组
const list = ref<any>([])

// 定义一个名为shopList的函数，用于获取商品列表
const shopList = () => {
  // 调用getlist函数，获取商品列表
  getlist().then((res) => {
    // console.log(res)
    // 将获取到的商品列表赋值给list变量
    list.value = res.data.data.content_list
  })
}
// 调用shopList函数
shopList()
</script>
